<template>
  <div class="page-contractdtl">
    <myHeader head-title="合同详情" goBack="true"></myHeader>
    <div>
      原始合同
    </div>
    <div>
      <ul class="contdtl_ul">
        <li class="contdtl_ul_li">合同编号: {{contractId}}</li>
        <li class="contdtl_ul_li">合同起始日期: {{startDate}}</li>
        <li class="contdtl_ul_li">合同结束日期: {{endDate}}</li>
        <li class="contdtl_ul_li">房屋地址: {{houseAddr}}</li>
        <li class="contdtl_ul_li">交租方式: {{payFreqDesc}}</li>
        <li class="contdtl_ul_li">交租日: </li>
        <li class="contdtl_ul_li">租金(元/月): {{(rental/100).toFixed(2)}}</li>
        <li class="contdtl_ul_li">押金(元): </li>
        <li class="contdtl_ul_li">第一次交租日期: </li>
        <li class="contdtl_ul_li">交租提醒日: </li>
        <li class="contdtl_ul_li">房东姓名: </li>
        <li class="contdtl_ul_li">房东电话: </li>
        <li class="contdtl_ul_li">房东银行卡: </li>
        <li class="contdtl_ul_li">审核状态: {{auditStatusDesc}}</li>
      </ul>
    </div>
    <div class="promit_button" @click="doPay">支付</div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import moment from 'moment'
  import myHeader from '@/components/common/header/header'
  import alertTip from '@/components/common/alertTip'
  import env from '@/config/env'
  import {apiUploadContImg} from '@/service/apiRent'
  export default {
    data() {
      return {
        contractId: null,
        houseAddr: null,
        startDate: null,
        endDate: null,
        rental: null,
        auditStatus: null
      }
    },
    components:{
      myHeader
    },
    computed: {
      ...mapGetters([
        'storeUserRent'
      ]),
      payFreqDesc: function() {
        if (this.payFreq === 1) {
          return "每月";
        } else if (this.payFreq === 3) {
          return "每3月";
        } else {
          return "无效";
        }
      },
      auditStatusDesc: function() {
        if (this.auditStatus === 'S') {
          return "审核通过";
        } else if (this.payFreq === 'F') {
          return "审核拒绝";
        } else {
          return "审核中";
        }
      }
    },
    beforeMount() {
      this.initData();
    },
    methods: {
      initData() {
        let index = this.$route.query.index;
        console.log("index:", index);
        if (this.storeUserRent.contList === null ||
            this.storeUserRent.contList.length === 0 ||
            this.storeUserRent.contList.length <= index) {
          console.warn("this.storeUserRent.contList.length:", this.storeUserRent.contList.length);
          this.$router.go(-1);
          return;
        }
        let data = this.storeUserRent.contList[index];
        console.log("data:", data);
        this.contractId = data.contractId;
        this.houseAddr = data.houseAddr;
        this.startDate = data.startDate;
        this.endDate = data.endDate;
        this.rental  = data.rental;
        this.payFreq = data.payFreq;
        this.auditStatus = data.auditStatus;
      },
      onBridgeReady() {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
            "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
            "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
            "package":"prepay_id=u802345jgfjsdfgsdg888",
            "signType":"MD5",         //微信签名方式：     
            "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
            },
            function(res){
              if(res.err_msg == "get_brand_wcpay_request:ok" ) {}
              // 使用以上方式判断前端返回,微信团队郑重提示：
              // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 
            }
        ); 
      },
      doPay() {
        console.log("begin doPay");
        if (typeof WeixinJSBridge === "undefined"){
          if (document.addEventListener ){
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady); 
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
          }
        } else {
           this.onBridgeReady();
        }
        console.log("end doPay");
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';

  .page-contractdtl{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .contdtl_ul{
    @include sc(0.7rem, #999);
    border: 0.2rem solid #f1f1f1;
    padding: 0.1rem 0.1rem;
    border-radius: 0.08rem;
    margin-left: 0.05rem;
    .contdtl_ul_li{
      padding: 0.2rem 0.1rem;
    }
  }
  .promit_button{
    @include wh(100%, 2rem);
    @include sc(.8rem, #fff);
    border-radius: 0.15rem;
    line-height: 2rem;
    margin-top: 1rem;
    text-align: center;
    background-color: $blue;
  }
</style>